<template>
  <div>
    <div class="top flexBetweenCenter">
      <div class="flexStart">
        <div class="rigntMargin">
          <a-range-picker
            v-decorator="['orderTime']"
            v-model="dayTime"
            :disabled-date="disabledDate"
            @openChange="onOpenChange"
            @calendarChange="onCalendarChange"
            @change="onChangeTimer"
          />
        </div>
        <div class="rigntMargin">
          <!-- <a-select
            label-in-value
            :default-value="defaultData"
            @change="handleChange"
            style="width:200px;margin-right:10px"
          >
            <a-select-option
              v-for="(item,index) in teamGroup "
              :key="index"
              :value="item.key"
            >{{item.lable}}</a-select-option>
          </a-select> -->
           <a-select :default-value="defaultData" style="width: 200px;" @change="handleChange">
            <a-select-opt-group :label="item.label" v-for="(item,index) in teamGroup" :key="index">
              <a-select-option v-for="(data,index) in item.children "
              :key="index"
              :value="data.lable">{{data.lable}}</a-select-option>
            </a-select-opt-group>
          </a-select>
          <!-- <a-cascader
            :options="options"
            :display-render="displayRender"
            expand-trigger="hover"
            placeholder="Please select"
            :default-value="['江苏路通建筑劳务有限公司', '下构一队', '钢筋班']"
            @change="onChange"
            style="margin-right:10px"
          /> -->
        </div>
        <div>
          <a-button style="font-size:16px">
            <span style="display:inline-block;hight:32px"></span>导出
          </a-button>
        </div>
      </div>
      <div>
        <a-input-search placeholder="请输入姓名" style="width: 300px" @search="onSearch" />
      </div>
    </div>
    <!-- 表格 -->
    <div class="atable">
      <a-table :columns="columns" :data-source="data">
        <!-- <span slot="action" slot-scope="text, record">
            <a style="color:#1890FF" @click="onEdit(text, record)">详情</a>
        </span>-->
      </a-table>
    </div>
    <!-- 分页 -->
    <div class="pagination flexBetween">
      <div>共{{total}} 条记录 第 {{current}} / {{Math.ceil((total/pageSize))}} 页</div>
      <div>
        <a-pagination
          :current="current"
          :page-size-options="pageSizeOptions"
          :total="total"
          show-size-changer
          :pinspector-size="pageSize"
          @showSizeChange="onShowSizeChange"
          @change="pageChange"
          show-quick-jumper
        >
          <template slot="buildOptionText" slot-scope="props">
            <span v-if="props.value !== '40'">{{ props.value }}条/页</span>
            <span v-if="props.value === '40'">全部</span>
          </template>
        </a-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import moment from 'moment'

const columns = [
  { title: '日期', dataIndex: 'name', key: 'name' },
  { title: '姓名', dataIndex: 'proName', key: 'proName' },
  { title: '岗位', dataIndex: 'proCode', key: 'proCode', align: 'center' },
  { title: '考勤记录（当天首次时间）', dataIndex: 'proId', key: 'proId', align: 'center' },
  { title: '考勤方式', dataIndex: 'entryTime', key: 'entryTime', align: 'center' }
]
const tabdata = [
  {
    key: '1',
    name: '2020-12-21',
    proName: '张三',
    proCode: '技术员',
    proId: '06:04:58',
    entryTime: '微信'
  },
  {
    key: '2',
    name: '2020-12-21',
    proName: '张三',
    proCode: '技术员',
    proId: '06:04:58',
    entryTime: '考勤机'
  },
  {
    key: '3',
    name: '2020-12-21',
    proName: '张三',
    proCode: '技术员',
    proId: '06:04:58',
    entryTime: '考勤机'
  },
  {
    key: '4',
    name: '2020-12-21',
    proName: '张三',
    proCode: '技术员',
    proId: '06:04:58',
    entryTime: '微信'
  },
  {
    key: '5',
    name: '2020-12-21',
    proName: '张三',
    proCode: '技术员',
    proId: '06:04:58',
    entryTime: '考勤机'
  }
]
const options=[
        {
          value: '江苏路通建筑劳务有限公司',
          label: '江苏路通建筑劳务有限公司',
          children: [
            {
              value: '下构一队',
              label: '下构一队',
              children: [
                {
                  value: '钢筋班',
                  label: '钢筋班',
                },
              ],
            },
          ],
        },
        {
          value: '南京仁泰基础工程有限公司',
          label: '南京仁泰基础工程有限公司',
          children: [
            {
              value: '路基施工一队',
              label: '路基施工一队',
              children: [
                {
                  value: '混凝土班组',
                  label: '混凝土班组',
                },
              ],
            },
          ],
        },
      ]
export default {
  data() {
    return {
      dayTime: [moment(new Date(), 'YYYY-MM-DD'), moment(new Date(), 'YYYY-MM-DD')],
      selectPriceDate: '',
      offsetDays: 2678400 * 1000, //最多选择范围31天
      disabledCurrent: null,
      columns,
      data: tabdata,
      pageSizeOptions: ['5', '10', '20', '30', '40'],
      current: 1,
      pageSize: 10,
      total: 1,
      defaultData:'钢筋班',
      teamGroup: [{
        label:'江苏路通建筑劳务有限公司',
        children:[ {
          key: 'gj',
          lable: '钢筋班'
        },
        {
          key: 'mg',
          lable: '木工班'
        },
        
        ]
       },
       {
        label:'南京仁泰基础工程有限公司',
        children:[ {
          key: 'gj',
          lable: '钢筋班'
        },
        {
          key: 'mg',
          lable: '木工班'
        },
        
        ]
       }
      ],
      options,
    }
  },
  mounted() {
    // console.log(this.monthTime)
  },
  methods: {
    moment,
    onChange(value) {
      console.log(value);
    },
    displayRender({ labels }) {
      return labels[labels.length - 1];
    },
    onSearch(value) {
      console.log(value)
    },
    handleChange(value) {
      //   console.log(value)
    },
    onShowSizeChange(current, pageSize) {
      // console.log(current, pageSize)
      // this.current = 1
      // this.pageSize = pageSize
      // this.getTable()
    },
    pageChange(current, pageSize) {
      // this.current = current
      // this.pageSize = pageSize
      // this.getTable()
    },
    timeChange(e) {
      console.log(e)
    },
    /**
     * 清空禁用时间段的设置
     */
    onOpenChange(status) {
      // 清空禁用时间段的设置
      this.disabledCurrent = null
    },
    /**
     * 获取手动选择的时间段起始值
     */
    onCalendarChange(dates) {
      console.log('From: ', dates[0], ', to: ', dates[1])
      // 获取手动选择的时间段起始值
      this.disabledCurrent = dates[0]
    },
    /**
     * 时间控制切换赋值
     */
    onChangeTimer(moment, data) {
      this.fromTime = data[0]
      this.toTime = data[1]
    },
    /**
     * 1、时间限制范围 开始时间~结束时间不能超过31天
     */
    disabledDate(current) {
      if (!this.disabledCurrent) return false

      return (
        (current &&
          current <
            moment(this.disabledCurrent)
              .subtract(1, 'M')
              .startOf('day')) ||
        current >
          moment(this.disabledCurrent)
            .add(1, 'M')
            .endOf('day')
      )
    }
  }
}
</script>

<style scoped>
::v-deep .ant-calendar-picker-icon {
  display: none;
}
::v-deep .ant-calendar-picker-clear {
  display: none;
}

::v-deep .ant-calendar-picker-input.ant-input {
  width: 320px;

  cursor: pointer;
}
.rigntMargin {
  margin-right: 20px;
}
.restDay {
  color: #ff9933;
}
.top {
  padding-top:30px ;
  margin-bottom: 30px;
}
.atable {
  margin-bottom: 20px;
}
</style>